<script setup lang="ts">
import { onMounted, ref, watch, h } from 'vue'
import router from '@/router'
import { userStore } from '@/store/user'
import { pcListUserOrder, cancel, pcListUserDetail, listDetailByOrderId } from '@/apis/futures'
import { PcListUserDetailItem, PcListUserOrderItem, ListDetailByOrderIdItem, } from '@/interfaces/cct'
import Loading from './common/Loading.vue'
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css';
import { useCoinStore } from '@/store/coin'
interface DetailInfo extends PcListUserDetailItem {
    list?: ListDetailByOrderIdItem[]
}
const tabList = ref([
    {
        label: '仓位(0)',
        value: 'position',
        left: '22px'
    },
    {
        label: '当前委托(0)',
        value: 'currentCommission',
        left: '22px'
    },
    {
        label: '历史委托',
        value: 'historicalCommission',
        left: '88px'
    },
    {
        label: '历史成交',
        value: 'historicalTransactions',
        left: '154px'
    },
    {
        label: '资金流水',
        value: 'fundFlow',
        left: '154px'
    },
    {
        label: '仓位历史记录',
        value: 'positionHistory',
        left: '154px'
    }
])
const isLoading = ref(true)
const activeTab = ref('position')
const currentCommissionList = ref<PcListUserOrderItem[]>([])
const historicalCommissionList = ref<PcListUserDetailItem[]>([])
const listoricalTransactionsList = ref<PcListUserDetailItem[]>([])
const detailInfo = ref<DetailInfo>()
const detailInfo1 = ref<DetailInfo>()
const loginOrRegister = (type: string) => {
    router.push(`/${type}`)
}
const listDetailByOrderIdFn = async (item: PcListUserDetailItem, type: string) => {
    const isCurrentlyChecked = item.checked;
    if (type === '0') {
        detailInfo.value = item
        historicalCommissionList.value.forEach((item) => {
            item.checked = false
        })
    } else {
        detailInfo1.value = item
        listoricalTransactionsList.value.forEach((item) => {
            item.checked = false
        })
    }
    item.checked = !isCurrentlyChecked
    const data = await listDetailByOrderId({
        coinName: item.coinName,
        unitName: item.unitName,
        orderId: item.orderId
    })
    if (type === '0') {
        detailInfo.value!.list = data
    } else {
        detailInfo1.value!.list = data
    }
}
const pcListUserDetailFn = async () => {
    try {
        const data = await pcListUserDetail({
            coinName: '',
            unitName: '',
            pageNum: '1',
            pageSize: '9999',
            type: ''
        })
        historicalCommissionList.value = data.rows
    } catch { }
}
const pcListUserOrderFn = async () => {
    try {
        const data = await pcListUserOrder({
            coinName: '',
            unitName: '',
            pageNum: '1',
            pageSize: '9999',
            type: ''
        })
        currentCommissionList.value = data.rows
        // tabList.value[0].label = `当前委托(${data.total})`
        isLoading.value = false
    } catch (error) {
        isLoading.value = false

    }
}
const pcListUserOrderFinishFn = async () => {
    try {
        const data = await pcListUserDetail({
            coinName: '',
            unitName: '',
            pageNum: '1',
            pageSize: '9999',
            status: 'finish'
        })
        listoricalTransactionsList.value = data.rows
        isLoading.value = false
    } catch (error) {
        isLoading.value = false

    }
}
const cancelFn = async (item: PcListUserOrderItem) => {
    try {
        await cancel({
            orderId: item.id
        })
        isLoading.value = true
        ElNotification({
            title: '',
            duration: 3000,
            message: h('div', { class: '' }, [
                h('div', { class: 'w-full  flex items-center' }, [
                    h('div', { class: 'iconfont icon-warning-circle text-primary-500 text-[20px]' }),
                    h('div', { class: 'text-black text-[14px] ml-[8px]' }, `${item.publishType === "LIMIT" ? '限价' : '市价'}${item.orderType === 'BUY' ? '买' : '卖'}单已取消`)
                ]),
                h('div', { class: 'text-[#9c9c9c] ml-[28px] text-[14px]' }, `您用USDT买入${item.totalNum}个${item.coinName}的${item.publishType === "LIMIT" ? '限价' : '市价'}订单已经取消`)
            ]),
        })
        pcListUserDetailFn()
        pcListUserOrderFn()
    } catch (error) {
        isLoading.value = false
    }
}
watch(() => userStore().buyStatus, (v) => {
    if (v) {
        pcListUserOrderFn()
        pcListUserDetailFn()
        pcListUserOrderFinishFn()
        userStore().setBuyStatus(0)
    }
})
watch(() => userStore().sellStatus, (v) => {
    if (v) {
        pcListUserOrderFn()
        pcListUserDetailFn()
        pcListUserOrderFinishFn()
        userStore().setSellStatus(0)
    }
})
onMounted(() => {
    if (userStore().userInfo.token) {
        pcListUserDetailFn()
        pcListUserOrderFn()
        pcListUserOrderFinishFn()
    }
})
</script>

<template>
    <div class="px-[16px] h-full">
        <div
            class=" mx-[-16px]  px-[16px] text-[14px] flex flex-col justify-between  border-0  border-b-[1px] border-[#ededed] dark:border-[#333b47] border-solid">
            <div class="h-[40px]  flex items-center text-[14px] font-[500] relative">
                <div @click="activeTab = item.value" v-for="item, i in tabList" :key="i"
                    :class="[activeTab === item.value ? 'text-black dark:text-[#eaebef] active' : 'text-text dark:text-[#929AA5]']"
                    class=" mr-[16px]  relative cursor-pointer h-[40px] leading-[40px] hover:text-black dark:hover:text-[#eaebef] ">
                    {{ item.label }}
                </div>
                <!-- <span :style="{ left: tabList.find(item => item.value === activeTab)?.left }"
                    class=" absolute bottom-0 w-[16px] l h-[3px] bg-primary-300"></span> -->
            </div>
        </div>
        <div class=" box-border pt-[10px] h-[calc(100%-51px)]" v-show="activeTab === 'position'">
            <template v-if="userStore().userInfo.token">
                <div class="h-full">
                    <div
                        class="h-[36px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]  flex items-center justify-between">
                        <div class="w-[140px]">日期</div>
                        <div class="w-[100px]">交易对</div>
                        <div class="w-[100px]">类型</div>
                        <div class="w-[60px]">方向</div>
                        <div class="w-[160px]">价格</div>
                        <div class="w-[160px]">数量</div>
                        <div class="w-[160px]">金额</div>
                        <div class="w-[160px]">操作</div>
                    </div>
                    <div v-show="!isLoading" class="h-[calc(100%-36px)]  overflow-y-auto">
                        <template v-if="!currentCommissionList.length">
                            <div class="flex items-center justify-center h-full flex-col">
                                <span
                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">暂无仓位。</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="h-[40px] dark:text-[#eaecef] hover:bg-[#f5f5f5] dark:hover:bg-[#29313d] flex items-center justify-between dark:border-[#333b47] text-[12px] border-0 border-b-[1px] border-solid border-[#ededed]"
                                v-for="item, i in currentCommissionList" :key="i">
                                <div class="w-[140px]">{{ item.createTime }}</div>
                                <div class="w-[100px]">{{ item.coinName }}/{{ item.unitName }}</div>
                                <div class="w-[100px]">{{ item.publishType === "LIMIT" ? '限价委托' : '市价委托' }}</div>
                                <div class="w-[60px]" :class="[item.orderType === 'BUY' ? 'text-rise' : 'text-fall']">{{
                                    item.orderType === 'BUY' ? '买' : '卖' }}</div>
                                <div class="w-[160px]">{{ item.unitPrice || '-' }}</div>
                                <div class="w-[160px]">{{ item.totalNum }}</div>
                                <div class="w-[160px]">{{ item.lastTurnover }} {{ item.unitName }}</div>
                                <div class="w-[160px]">
                                    <span class="iconfont icon-shanchu text-[#9c9c9c] cursor-pointer"
                                        @click="cancelFn(item)"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div v-show="isLoading" class="h-[calc(100%-36px)] flex items-center justify-center">
                        <Loading />
                    </div>
                </div>

            </template>
            <div v-else class="h-full flex items-center justify-center w-full text-[14px]">
                <span class="text-primary-500 cursor-pointer"
                    @click="loginOrRegister('login')">登录</span><span>或</span><span @click="loginOrRegister('register')"
                    class="text-primary-500 cursor-pointer">立即注册</span><span>开始交易</span>
            </div>
        </div>
        <div class=" box-border pt-[10px] h-[calc(100%-51px)]" v-show="activeTab === 'fundFlow'">
            <template v-if="userStore().userInfo.token">
                <div class="h-full">
                    <div
                        class="h-[36px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]  flex items-center justify-between">
                        <div class="w-[140px]">日期</div>
                        <div class="w-[100px]">交易对</div>
                        <div class="w-[100px]">类型</div>
                        <div class="w-[60px]">方向</div>
                        <div class="w-[160px]">价格</div>
                        <div class="w-[160px]">数量</div>
                        <div class="w-[160px]">金额</div>
                        <div class="w-[160px]">操作</div>
                    </div>
                    <div v-show="!isLoading" class="h-[calc(100%-36px)]  overflow-y-auto">
                        <template v-if="!currentCommissionList.length">
                            <div class="flex items-center justify-center h-full flex-col">
                                <span
                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">暂无资金流水。</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="h-[40px] dark:text-[#eaecef] hover:bg-[#f5f5f5] dark:hover:bg-[#29313d] flex items-center justify-between dark:border-[#333b47] text-[12px] border-0 border-b-[1px] border-solid border-[#ededed]"
                                v-for="item, i in currentCommissionList" :key="i">
                                <div class="w-[140px]">{{ item.createTime }}</div>
                                <div class="w-[100px]">{{ item.coinName }}/{{ item.unitName }}</div>
                                <div class="w-[100px]">{{ item.publishType === "LIMIT" ? '限价委托' : '市价委托' }}</div>
                                <div class="w-[60px]" :class="[item.orderType === 'BUY' ? 'text-rise' : 'text-fall']">{{
                                    item.orderType === 'BUY' ? '买' : '卖' }}</div>
                                <div class="w-[160px]">{{ item.unitPrice || '-' }}</div>
                                <div class="w-[160px]">{{ item.totalNum }}</div>
                                <div class="w-[160px]">{{ item.lastTurnover }} {{ item.unitName }}</div>
                                <div class="w-[160px]">
                                    <span class="iconfont icon-shanchu text-[#9c9c9c] cursor-pointer"
                                        @click="cancelFn(item)"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div v-show="isLoading" class="h-[calc(100%-36px)] flex items-center justify-center">
                        <Loading />
                    </div>
                </div>

            </template>
            <div v-else class="h-full flex items-center justify-center w-full text-[14px]">
                <span class="text-primary-500 cursor-pointer"
                    @click="loginOrRegister('login')">登录</span><span>或</span><span @click="loginOrRegister('register')"
                    class="text-primary-500 cursor-pointer">立即注册</span><span>开始交易</span>
            </div>
        </div>
        <div class=" box-border pt-[10px] h-[calc(100%-51px)]" v-show="activeTab === 'positionHistory'">
            <template v-if="userStore().userInfo.token">
                <div class="h-full">
                    <div
                        class="h-[36px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]  flex items-center justify-between">
                        <div class="w-[140px]">日期</div>
                        <div class="w-[100px]">交易对</div>
                        <div class="w-[100px]">类型</div>
                        <div class="w-[60px]">方向</div>
                        <div class="w-[160px]">价格</div>
                        <div class="w-[160px]">数量</div>
                        <div class="w-[160px]">金额</div>
                        <div class="w-[160px]">操作</div>
                    </div>
                    <div v-show="!isLoading" class="h-[calc(100%-36px)]  overflow-y-auto">
                        <template v-if="!currentCommissionList.length">
                            <div class="flex items-center justify-center h-full flex-col">
                                <span
                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">暂无仓位历史记录。</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="h-[40px] dark:text-[#eaecef] hover:bg-[#f5f5f5] dark:hover:bg-[#29313d] flex items-center justify-between dark:border-[#333b47] text-[12px] border-0 border-b-[1px] border-solid border-[#ededed]"
                                v-for="item, i in currentCommissionList" :key="i">
                                <div class="w-[140px]">{{ item.createTime }}</div>
                                <div class="w-[100px]">{{ item.coinName }}/{{ item.unitName }}</div>
                                <div class="w-[100px]">{{ item.publishType === "LIMIT" ? '限价委托' : '市价委托' }}</div>
                                <div class="w-[60px]" :class="[item.orderType === 'BUY' ? 'text-rise' : 'text-fall']">{{
                                    item.orderType === 'BUY' ? '买' : '卖' }}</div>
                                <div class="w-[160px]">{{ item.unitPrice || '-' }}</div>
                                <div class="w-[160px]">{{ item.totalNum }}</div>
                                <div class="w-[160px]">{{ item.lastTurnover }} {{ item.unitName }}</div>
                                <div class="w-[160px]">
                                    <span class="iconfont icon-shanchu text-[#9c9c9c] cursor-pointer"
                                        @click="cancelFn(item)"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div v-show="isLoading" class="h-[calc(100%-36px)] flex items-center justify-center">
                        <Loading />
                    </div>
                </div>

            </template>
            <div v-else class="h-full flex items-center justify-center w-full text-[14px]">
                <span class="text-primary-500 cursor-pointer"
                    @click="loginOrRegister('login')">登录</span><span>或</span><span @click="loginOrRegister('register')"
                    class="text-primary-500 cursor-pointer">立即注册</span><span>开始交易</span>
            </div>
        </div>
        <div class=" box-border pt-[10px] h-[calc(100%-51px)]" v-show="activeTab === 'currentCommission'">
            <template v-if="userStore().userInfo.token">
                <div class="h-full">
                    <div
                        class="h-[36px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]  flex items-center justify-between">
                        <div class="w-[140px]">日期</div>
                        <div class="w-[100px]">交易对</div>
                        <div class="w-[100px]">类型</div>
                        <div class="w-[60px]">方向</div>
                        <div class="w-[160px]">价格</div>
                        <div class="w-[160px]">数量</div>
                        <div class="w-[160px]">金额</div>
                        <div class="w-[160px]">操作</div>
                    </div>
                    <div v-show="!isLoading" class="h-[calc(100%-36px)]  overflow-y-auto">
                        <template v-if="!currentCommissionList.length">
                            <div class="flex items-center justify-center h-full flex-col">
                                <span
                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">暂无当前委托。</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="h-[40px] dark:text-[#eaecef] hover:bg-[#f5f5f5] dark:hover:bg-[#29313d] flex items-center justify-between dark:border-[#333b47] text-[12px] border-0 border-b-[1px] border-solid border-[#ededed]"
                                v-for="item, i in currentCommissionList" :key="i">
                                <div class="w-[140px]">{{ item.createTime }}</div>
                                <div class="w-[100px]">{{ item.coinName }}/{{ item.unitName }}</div>
                                <div class="w-[100px]">{{ item.publishType === "LIMIT" ? '限价委托' : '市价委托' }}</div>
                                <div class="w-[60px]" :class="[item.orderType === 'BUY' ? 'text-rise' : 'text-fall']">{{
                                    item.orderType === 'BUY' ? '买' : '卖' }}</div>
                                <div class="w-[160px]">{{ item.unitPrice || '-' }}</div>
                                <div class="w-[160px]">{{ item.totalNum }}</div>
                                <div class="w-[160px]">{{ item.lastTurnover }} {{ item.unitName }}</div>
                                <div class="w-[160px]">
                                    <span class="iconfont icon-shanchu text-[#9c9c9c] cursor-pointer"
                                        @click="cancelFn(item)"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div v-show="isLoading" class="h-[calc(100%-36px)] flex items-center justify-center">
                        <Loading />
                    </div>
                </div>

            </template>
            <div v-else class="h-full flex items-center justify-center w-full text-[14px]">
                <span class="text-primary-500 cursor-pointer"
                    @click="loginOrRegister('login')">登录</span><span>或</span><span @click="loginOrRegister('register')"
                    class="text-primary-500 cursor-pointer">立即注册</span><span>开始交易</span>
            </div>
        </div>
        <div class=" box-border pt-[10px] h-[calc(100%-51px)]" v-show="activeTab === 'historicalCommission'">
            <template v-if="userStore().userInfo.token">
                <div class="h-full">
                    <div class="h-[36px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]  flex items-center">
                        <div class="w-[20px] shrink-0"></div>
                        <div class="w-[220px]">委托时间</div>
                        <div class="w-[180px]">交易对</div>
                        <div class="w-[120px]">类型</div>
                        <div class="w-[120px]">方向</div>
                        <div class="w-[160px]">价格</div>
                        <div class="w-[160px]">成交数量</div>
                        <div class="w-[160px]">数量</div>
                        <div class="w-[160px]">成交额</div>
                        <div class="w-[160px]">状态</div>
                    </div>
                    <div class="h-[calc(100%-36px)]  overflow-y-auto">
                        <template v-if="!historicalCommissionList.length">
                            <div class="flex items-center justify-center h-full flex-col">
                                <span
                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">暂无历史委托。</div>
                            </div>
                        </template>
                        <template v-else>
                            <div v-for="item, i in historicalCommissionList" :key="i"
                                class="flex  flex-col-reverse dark:border-[#333b47] border-0 border-b-[1px] border-solid border-[#ededed] ">
                                <div v-if="item.checked" class="down bg-[#fafafa]  dark:bg-[#0b0e11] flex text-[12px]">
                                    <div class="w-[20px]"></div>
                                    <div class="w-[calc(100%-20px)]">
                                        <div class="flex items-center h-[40px] dark:text-[#eceaef]">
                                            <div>订单编号：{{ detailInfo?.orderId || '-' }}</div>
                                            <div class="ml-[20px]" v-if="detailInfo?.orderStatus === 'CANCEL'">创建时间：{{
                                                detailInfo?.createTime || '-' }}</div>
                                            <div class="ml-[20px]" v-else>更新时间：{{ detailInfo?.createTime || '-' }}</div>
                                        </div>
                                        <div class="h-[32px] flex items-center dark:text-[#707a8a]  text-[#9c9c9c]">
                                            <div class="w-1/6">日期</div>
                                            <div class="w-1/6">成交价</div>
                                            <div class="w-1/6">成交数量</div>
                                            <div class="w-1/6">手续费</div>
                                            <div class="w-1/6">成交金额</div>
                                            <div class="w-1/6">角色</div>
                                        </div>
                                        <template v-if="detailInfo?.list?.length">
                                            <div v-for="item, i in detailInfo.list" :key="i"
                                                class="h-[40px] flex items-center dark:text-[#eceaef]">
                                                <div class="w-1/6">{{ item.createTime }}</div>
                                                <div class="w-1/6">{{ item.unitPrice }}</div>
                                                <div class="w-1/6">{{ item.tradingNum }}</div>
                                                <div class="w-1/6">{{ item.serviceCharge }}</div>
                                                <div class="w-1/6">{{ item.unitPrice * item.tradingNum }}</div>
                                                <div class="w-1/6">{{ item.tradingType }}</div>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="h-[1px] bg-[#ededed] dark:bg-[#333b47]"></div>
                                            <div class="flex items-center justify-center h-[120px] w-full flex-col">
                                                <span
                                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">
                                                    暂无数据</div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div @click="listDetailByOrderIdFn(item, '0')"
                                    class="h-[40px] up hover:bg-[#f5f5f5] flex items-center dark:text-[#eceaef]  text-[12px] dark:hover:bg-[#29313d] ">
                                    <div class="w-[20px] cursor-pointer shrink-0">
                                        <span class=" iconfont  text-[12px]"
                                            :class="[item.checked ? 'icon-xiangshang1' : 'icon-xiangxia1']"></span>
                                    </div>
                                    <div class="w-[220px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.createTime }}</div>
                                    <div class="w-[180px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.coinName }}/{{ item.unitName }}</div>
                                    <div class="w-[120px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.publishType === "LIMIT" ? '限价委托' : '市价委托' }}</div>
                                    <div class="w-[120px]"
                                        :class="[item.orderType === 'BUY' ? 'text-rise' : 'text-fall', item.orderStatus === 'CANCEL' ? 'opacity-30' : 'opacity-100']">
                                        {{
                                            item.orderType === 'BUY' ? '买' : '卖' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.entrustTurnover || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.dealNum || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.entrustNum || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.dealTurnover || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">
                                        {{ item.orderStatus === "CANCEL" ? '已取消' : item.orderStatus === "FINISH" ?
                                            '完全成交' :
                                            '进行中' }}
                                    </div>
                                </div>

                            </div>
                        </template>
                    </div>
                </div>

            </template>
            <div v-else class="h-full flex items-center justify-center w-full text-[14px]">
                <span class="text-primary-500 cursor-pointer"
                    @click="loginOrRegister('login')">登录</span><span>或</span><span @click="loginOrRegister('register')"
                    class="text-primary-500 cursor-pointer">立即注册</span><span>开始交易</span>
            </div>
        </div>
        <div class=" box-border pt-[10px] h-[calc(100%-51px)]" v-show="activeTab === 'historicalTransactions'">
            <template v-if="userStore().userInfo.token">
                <div class="h-full">
                    <div class="h-[36px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]  flex items-center">
                        <div class="w-[20px] shrink-0"></div>
                        <div class="w-[220px]">委托时间</div>
                        <div class="w-[180px]">交易对</div>
                        <div class="w-[120px]">类型</div>
                        <div class="w-[120px]">方向</div>
                        <div class="w-[160px]">价格</div>
                        <div class="w-[160px]">成交数量</div>
                        <div class="w-[160px]">数量</div>
                        <div class="w-[160px]">成交额</div>
                        <div class="w-[160px]">状态</div>
                    </div>
                    <div class="h-[calc(100%-36px)]  overflow-y-auto">
                        <template v-if="!listoricalTransactionsList.length">
                            <div class="flex items-center justify-center h-full flex-col">
                                <span
                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">暂无历史委托。</div>
                            </div>
                        </template>
                        <template v-else>
                            <div v-for="item, i in listoricalTransactionsList" :key="i"
                                class="flex  flex-col-reverse dark:border-[#333b47] border-0 border-b-[1px] border-solid border-[#ededed] ">
                                <div v-if="item.checked" class="down bg-[#fafafa]  dark:bg-[#0b0e11] flex text-[12px]">
                                    <div class="w-[20px]"></div>
                                    <div class="w-[calc(100%-20px)]">
                                        <div class="flex items-center h-[40px] dark:text-[#eceaef]">
                                            <div>订单编号：{{ detailInfo1?.orderId || '-' }}</div>
                                            <div class="ml-[20px]" v-if="detailInfo1?.orderStatus === 'CANCEL'">创建时间：{{
                                                detailInfo1?.createTime || '-' }}</div>
                                            <div class="ml-[20px]" v-else>更新时间：{{ detailInfo1?.createTime || '-' }}
                                            </div>
                                        </div>
                                        <div class="h-[32px] flex items-center dark:text-[#707a8a]  text-[#9c9c9c]">
                                            <div class="w-1/6">日期</div>
                                            <div class="w-1/6">成交价</div>
                                            <div class="w-1/6">成交数量</div>
                                            <div class="w-1/6">手续费</div>
                                            <div class="w-1/6">成交金额</div>
                                            <div class="w-1/6">角色</div>
                                        </div>
                                        <template v-if="detailInfo1?.list?.length">
                                            <div v-for="item, i in detailInfo1.list" :key="i"
                                                class="h-[40px] flex items-center dark:text-[#eceaef]">
                                                <div class="w-1/6">{{ item.createTime }}</div>
                                                <div class="w-1/6">{{ item.unitPrice }}</div>
                                                <div class="w-1/6">{{ item.tradingNum }}</div>
                                                <div class="w-1/6">{{ item.serviceCharge }}</div>
                                                <div class="w-1/6">{{ item.unitPrice * item.tradingNum }}</div>
                                                <div class="w-1/6">{{ item.tradingType }}</div>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="h-[1px] bg-[#ededed] dark:bg-[#333b47]"></div>
                                            <div class="flex items-center justify-center h-[120px] w-full flex-col">
                                                <span
                                                    class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                                <div class="mt-[5px] text-[#9c9c9c] text-[14px] dark:text-[#707A8A]">
                                                    暂无数据</div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div @click="listDetailByOrderIdFn(item, '1')"
                                    class="h-[40px] up hover:bg-[#f5f5f5] flex items-center dark:text-[#eceaef]  text-[12px] dark:hover:bg-[#29313d] ">
                                    <div class="w-[20px] cursor-pointer shrink-0">
                                        <span class=" iconfont  text-[12px]"
                                            :class="[item.checked ? 'icon-xiangshang1' : 'icon-xiangxia1']"></span>
                                    </div>
                                    <div class="w-[220px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.createTime }}</div>
                                    <div class="w-[180px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.coinName }}/{{ item.unitName }}</div>
                                    <div class="w-[120px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.publishType === "LIMIT" ? '限价委托' : '市价委托' }}</div>
                                    <div class="w-[120px]"
                                        :class="[item.orderType === 'BUY' ? 'text-rise' : 'text-fall', item.orderStatus === 'CANCEL' ? 'opacity-30' : 'opacity-100']">
                                        {{
                                            item.orderType === 'BUY' ? '买' : '卖' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.entrustTurnover || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.dealNum || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.entrustNum || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">{{ item.dealTurnover || '-' }}</div>
                                    <div class="w-[160px]" :class="[item.orderStatus === 'CANCEL' ? 'text-[#bfbfbf] dark:text-[#4f5867]' : ''
                                    ]">
                                        {{ item.orderStatus === "CANCEL" ? '已取消' : item.orderStatus === "FINISH" ?
                                            '完全成交' :
                                            '进行中' }}
                                    </div>
                                </div>

                            </div>
                        </template>
                    </div>
                </div>

            </template>
            <div v-else class="h-full flex items-center justify-center w-full text-[14px]">
                <span class="text-primary-500 cursor-pointer"
                    @click="loginOrRegister('login')">登录</span><span>或</span><span @click="loginOrRegister('register')"
                    class="text-primary-500 cursor-pointer">立即注册</span><span>开始交易</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.down:hover~.up {
    background-color: #f5f5f5;
}

.dark .down:hover~.up {
    background-color: #29313d;
}

.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(50% - 8px);
    width: 16px;
    height: 2px;
    background-color: #7dd3fc;
}
</style>